<template>
  <!-- 底部部分 -->
  <footer class="footer">
    <span class="todo-count"><strong>{{sum}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <a :class="{selected:type ==='all'}" href="#/" @click="ctype('all')">全部</a>
      </li>
      <li>
        <a :class="{selected:type ==='active'}" href="#/active" @click="ctype('active')">进行中</a>
      </li>
      <li>
        <a :class="{selected:type ==='completed'}" href="#/completed" @click="ctype('completed')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click='delAll' v-if="clear">清除已完成</button>
  </footer>
</template>

<script>
export default {
  name: 'TodoListFooter',
  components: {},
  props: {
    sum:{
      type:Number,
      required: true,
    },
    clear:{
      type:Boolean,
      required: true,
    },
    type:{
      type:String,
      required: true,
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    //删除已完成
    delAll() {
      this.$emit('delAll')
    },
    //点击选中状态
    ctype(value) {
      this.$emit('ctype',value)
    }
  },
}
</script>

<style scoped></style>
